<template>
	<div class="recipe">
		<h3>欢迎来到我的美食空间</h3>
		<div class="user_info_box">
			<el-row>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-avatar
							shape="square"
							:size="250"
							:src="userInfo.avatar"
						></el-avatar>
					</div>
				</el-col>
				<el-col :span="13">
					<div class="grid-content bg-purple-light">
						<div class="name">
							<h3>{{ userInfo.name }}</h3>
							<el-tag
								v-if="
									userInfo.userId !==
									$store.state.userInfo.userId
								"
								class="toggle_following"
								:type="
									userInfo.isFollowing ? 'success' : 'info'
								"
								size="mini"
								@click="handleIsFollowingClick(userInfo.userId)"
								>{{
									userInfo.isFollowing ? '已关注' : '关注'
								}}</el-tag
							>
						</div>
						<span
							>{{ userInfo.createdAt | formatDate() }}加入美食杰
						</span>
						<span>
							<router-link
								v-if="
									userInfo.userId ===
									$store.state.userInfo.userId
								"
								:to="{ name: 'edit' }"
							>
								编辑个人资料
							</router-link>
						</span>
					</div>
				</el-col>
				<el-col :span="5">
					<div class="grid-content bg-purple">
						<div class="zhanwei"></div>
						<div class="card">
							关注<br />
							<span>{{ userInfo.following_len }}</span>
						</div>
						<div class="card">
							粉丝<br />
							<span>{{ userInfo.follows_len }}</span>
						</div>
						<div class="card">
							收藏<br />
							<span>{{ userInfo.collections_len }}</span>
						</div>
						<div class="card">
							作品<br />
							<span>{{ userInfo.work_menus_len }}</span>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-tabs
			tab-position="top"
			v-model="activeName"
			@tab-click="
				$router.push({ name: activeName, query: { ...$route.query } }),
					(list = [])
			"
		>
			<el-tab-pane label="作品" name="works"></el-tab-pane>
			<el-tab-pane label="关注" name="following"></el-tab-pane>
			<el-tab-pane label="粉丝" name="fans"></el-tab-pane>
			<el-tab-pane label="收藏" name="collection"></el-tab-pane>
		</el-tabs>
		<!-- 选项卡内容 -->
		<div class="user_info_show">
			<router-view :info="list" :activeName="activeName"></router-view>
		</div>
	</div>
</template>

<script>
import MenuCard from '@/components/MenuCard';
import {
	getCollection,
	getFans,
	getFollowing,
	getUserInfo,
	toggleFollowing,
} from '@/api/user';
import { getMenus } from '@/api/menu';
const getList = {
	async works(param) {
		return await getMenus(param);
	},
	async following(param) {
		return await getFollowing(param);
	},
	async fans(param) {
		return await getFans(param);
	},
	async collection(param) {
		return await getCollection(param);
	},
};

export default {
	components: { MenuCard },
	data() {
		return {
			userInfo: {},
			activeName: this.$route.name || 'works',
			isOwner: false, // 判断是否是 本人空间
			list: [], // 选项卡数据列表
		};
	},
	watch: {
		$route: {
			async handler() {
				// this.activeName = 'works';
				let { userId } = this.$route.query;
				// 如果没有传userId 说明访问的是 自己的空间
				// 如果传递了 userId 判断和 登录信息 去比对 判断是本人空间 还是他人空间
				// 如果是本人空间 userInfo 和 vuex 中的 userInfo 保持一致
				// 如果是他人空间 获取这个人的基本信息 赋值给 this.userInfo
				this.isOwner =
					!userId || userId === this.$store.state.userInfo.userId;
				if (this.isOwner) {
					// 本人
					this.userInfo = this.$store.state.userInfo;
				} else {
					// 他人
					getUserInfo({ userId }).then((res) => {
						// console.log(res, '获取他人信息 space.vue 93:25');
						this.userInfo = res.data;
					});
				}
				this.getInfoList(userId || this.userInfo.userId);
			},
			immediate: true, // 立即执行
		},
	},
	filters: {
		// 截取日期 xxxx-xx-xx 格式
		formatDate(value) {
			if (!value) return;
			return value.substr(0, 10);
		},
	},
	// created() {
	// 	this.handler();
	// },
	computed: {
		following: function () {
			return this.userInfo.isFollowing;
		},
	},
	methods: {
		async getInfoList(userId) {
			// 切换 tab时 最后一次返回的 ajax 数据 就填充谁的数据（list的数据）
			// 想要的是路由对应的数据
			// 在返回的数据中添加一个标识 如果返回数据的表示和当前请求标识相同 就填充数据
			// const data = await getList[this.activeName]({ userId });
			// console.log(data);
			// if (data.flag === this.activeName) {
			// 	this.list = data.data.list;
			// }

			(async (active) => {
				const data = await getList[this.activeName]({ userId });
				console.log(data);
				if (active === this.activeName) {
					this.list = data.data.list;
				}
			})(this.activeName);

			// function aaa(a) {
			// 	let act = this.activeName;
			// 	async function bbb(b) {
			// 		const data = await getList[this.$route.query]({ userId });
			// 		console.log(data);
			// 		if (b === this.$route.query) {
			// 			return data.data.list;
			// 		}
			// 	}
			// 	return bbb(a);
			// }
			// console.log(aaa(this.activeName));
		},
		// 关注
		handleIsFollowingClick(e) {
			toggleFollowing({ userId: e }).then((res) => {
				this.userInfo = res.data;
			});
		},
	},
};
</script>

<style lang='sass' scoped>
.toggle_following
	cursor: pointer
.recipe
	h3
		text-align: center
		font-weight: normal

	.user_info_box
		border-radius: 5px
		background-color: #fff
		height: 250px
		margin-top: 20px

		.bg-purple-light
			padding-top: 30px

			.name
				display: flex
				justify-content: space-between

			span
				color: #a59d99
				font-size: 12px

	.bg-purple
		display: flex
		flex-wrap: wrap

		.zhanwei
			height: 50px
			width: 100%

		.card
			margin: 10px
			height: 80px
			width: 80px
			border-radius: 50%
			border-bottom-right-radius: 0
			color: #a59d99
			border: 1px solid #a59d99
			line-height: 30px
			font-size: 14px
			text-align: center

			span
				font-size: 18px
				color: #f00

	.el-tabs
		margin-top: 20px

		::v-deep .el-tabs__item:hover
			color: #f00

		::v-deep .el-tabs__item.is-active
			color: #f00

		::v-deep .el-tabs__active-bar
			background-color: #f00

		::v-deep .el-tabs__nav-wrap::after
			background-color: transparent

	.user_info_show
		border-radius: 5px
		// padding: 20px
		background-color: #fff
</style>
<style lang="sass">
</style>